<template>
  <div class="left-totalMask">
    <div class="mask-detail">
        <div @click="close" class="close" v-if="!isHall" />
        <div :class="isHall?'top-flex':'top-content'">
            <div>枇杷加工品产值占比</div>
            <SelectYear @getYear="getYear" :yearOptions="yearOptions" :defaultYear="isHall?defaultYear1:defaultYear" />
        </div>
        <div ref="myChart1" style="height:180px; width: 360px"></div>
        <div class="scroll-content">
            <dv-scroll-board :config="config" style="width: 100%; height: 140px" ref="scrollBoard" />
        </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import SelectYear from '../SelectYear.vue'
import {queryProductionByeardp} from '@/api/dashboards'
export default {
    components:{SelectYear},
    props:{
        isHall:{
            type:Number
        },
        yearList:{
            type:Array
        },
        defaultYear:{
            type:[Number,String]
        }
    },
    data(){
        return{
            defaultYear1:undefined,
            yearOptions:[],
            option1:{},
            show:false,
            chartsData:[],
            config :{}
        }
    },
   watch: {
        yearList:{
            immediate:true,
            handler: function(val) {
                if(val){
                    this.yearOptions = val
                    this.defaultYear1 = val.length&&val[val.length-1].value
                    this.queryProductionByeardp(this.defaultYear1)
                }
            },
        },
        defaultYear:{
            immediate:true,
            handler: function(val) {
                if(val){
                    this.defaultYear = val
                    this.queryProductionByeardp(this.defaultYear)
                }
            },
        }
    },
    created(){
    },
    mounted() {
    },
    methods: {
        async queryProductionByeardp(val) {
            let res = await queryProductionByeardp({year:val})
           this.chartsData = res.result&&res.result.length&&res.result
           this.initChart1()
        },
        getYear(val) {
            if(val){
              this.queryProductionByeardp(val)
            }
        },
        close(){
            this.$emit('closeMask', false)
        },
        compare(property,desc) {
            return (a, b)=> {
                var value1 = a[property];
                var value2 = b[property];
                if(desc==true){
                    // 升序排列
                    return value1 - value2;
                }else{
                    // 降序排列
                    return value2 - value1;
                }
            }
        },
        initChart1() {
            let color = ['#4F4CFF', '#04E9B0', '#FF8300', '#FFC400', '#00DFFF'];
            this.totalNum = this.chartsData.length&&this.chartsData.reduce((c, item) => c + item.production * 1, 0)
            let baseData = [];
            for (var i = 0; i < this.chartsData.length; i++) {
            baseData.push({
                value: this.chartsData[i].production,
                name: this.chartsData[i].categoryName,
                label: {
                    color: color[i],
                },
                itemStyle: {
                normal: {
                    color:color[i],
                    borderRadius:11,
                    borderWidth:11,
                    borderColor: color[i]
                }
                }
            });
            }
            let myChart = echarts.init(this.$refs.myChart1)
            this.option1 = {
            title: [
                    {
                        text:this.totalNum,
                        top: '36%',
                        textAlign: 'center',
                        left: '48.5%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 18,
                            fontWeight: '600',
                        },
                    },
                    {
                        text:'总量',
                        top: '50%',
                        textAlign: 'center',
                        left: '48.5%',
                        textStyle: {
                            color: 'rgba(255, 255, 255, 0.4)',
                            fontSize: 12,
                            fontWeight: '400',
                        },
                    },
                ],
                // color: color,
                tooltip: {
                    show: false,
                },
                legend: {
                    show: false
                },
                grid: {
                    top: '0',
                    left: '50%',
                },
                series: [
                    {
                    zlevel: 1,
                    name: '塘栖枇杷种植株数及各品种占比',
                    type: 'pie',
                    selectedMode: false,
                    radius: [50, 55],
                    center: ['50%', '50%'],
                    startAngle: '140',
                    hoverAnimation: false,
                    labelLine:{
                        show:false
                    },
                    color: this.chartsData&&this.chartsData.length&&this.chartsData.map((l, index) => {
                        return color[index]
                    }),
                    label: {
                        normal: {
                        show: true,
                        formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
                        rich: {
                            b: {
                            fontSize: 14,
                            fontWeight: 600,
                            padding:[0,0,0,2]
                            },
                            c: {
                            fontSize: 12,
                            fontWeight: 400,
                            color: 'rgba(255, 255, 255, 0.6)',
                            }
                        },
                        color: this.chartsData&&this.chartsData.length&&this.chartsData.map((l, index) => {
                        return color[index]
                        }),
                        bleedMargin: "-90",
                        position:"outer",
                        showAbove:true,
                        padding: [0,10, 0, 7],
                        formatter: (params) => {
                             this.chartsData.map(item=>{
                             if(params.data.name===item.categoryName){
                                item.percent = params.percent+'%'
                             }
                            })
                            let dataList = []
                            this.chartsData.forEach(item=>{
                                dataList.push([item.categoryName,item.production,item.percent])
                            })
                            dataList= dataList.sort(this.compare("production",false))
                            this.config ={
                                align: ['center', 'center', 'center'],
                                waitTime: 3000,
                                headerHeight: 28,
                                index: true,
                                columnWidth: [60, 110, 118,95],
                                rowNum: 4,
                                indexHeader:'排名',
                                header: ['品类', '产值 (万元)','占比 (%)'],
                                headerBGC: 'rgba(255, 255, 255, 0.04)',
                                oddRowBGC: ' rgba(255, 255, 255, 0.04)',
                                evenRowBGC: 'rgba(0, 255, 203, 0)',
                                data: dataList
                            }
                            return '●{b| '+params.percent+'%}' + '\n' + '{c| '+params.data.name+'}'
                        },
                        textStyle: {
                            fontSize: 12,
                            lineHeight: 20,
                        },
                        }
                    },
                    itemStyle: {
                        normal: {
                        }
                    },
                    data: baseData
                    }
                ]
            };
        myChart.setOption(this.option1)
        },
    },
}
</script>
<style lang="less" scoped>
.left-totalMask {
    /deep/ .ant-select-selection-selected-value{
        min-width: 34px;
    }
    .mask-detail{
        width: 360px;
        height: 374px;
        // background: rgba(11, 17, 51, 0.85);
        // position: relative;
        // top: -105%;
        // left: 105%;
        // z-index: 1000;
         .close{
            cursor: pointer;
            width: 20px;
            height: 20px;
            background: url('../../assets/close.png') no-repeat;
            background-size: 100% 100%;
            position: absolute;
            right: 12px;
            top: 12px;
        }
        .top-content{
            display: flex;
            align-items: center;
            padding: 24px 10px 0 24px;
            font-size: 14px;
            font-weight: 600;
            color: #FFFFFF;
        }
        .top-flex{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 22px 0 24px;
            font-size: 14px;
            font-weight: 600;
            color: #FFFFFF;
        }
        .scroll-content {
            height: 140px;
            overflow: hidden;
            padding:0 24px;
            font-size: 12px;
            color: #FFFFFF;
            /deep/ .dv-scroll-board .header{
            font-size: 12px;
            color: rgba(255, 255, 255, 0.4);
            }
            /deep/  .dv-scroll-board .rows{
                font-size: 12px;
                color: RGBA(229, 230, 234, 1);
                font-weight: 400;
            }
       }
    }
}
</style>